<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <script src="../../layui/layui.js"></script>
    <link href="../../css/main.css" rel="stylesheet" type="text/css"/>
    <link href="../../css/iconfont.css" rel="stylesheet" type="text/css"/>
    <link href="../../css/test.css" rel="stylesheet" type="text/css"/>
    <script src="../../js/jquery-1.11.3.min.js"></script>
    <script src="../../js/echarts.js"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">在线考试系统</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a href="javascript:;">
                    <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg"
                         class="layui-nav-img">
                    student
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="information_page.html">个人中心</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" lay-unselect>
                <a href="/index.html">退出
                </a>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="testlist">
                <li class="layui-nav-item">
                    <a class="" href="javascript:;">成绩分析</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" data-id="0" data-title="成绩分析" data-url="index.php?&a=adminList"
                               class="site-demo-active" data-type="tabAdd">成绩分析</a></dd>

                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a class="" href="javascript:;">单选题</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" data-id="1" data-title="单选题1" data-url="index.php?&a=adminList"
                               class="site-demo-active" data-type="tabAdd">单选题1</a></dd>
                        <dd><a href="javascript:;" data-id="2" data-title="单选题2" data-url="index.php?&a=adminList"
                               class="site-demo-active" data-type="tabAdd">单选题2</a></dd>
                        <dd><a href="javascript:;" data-id="3" data-title="单选题3" data-url="index.php?&a=adminList"
                               class="site-demo-active" data-type="tabAdd">单选题3</a></dd>
                        <dd><a href="javascript:;" data-id="4" data-title="单选题4" data-url="index.php?&a=adminList"
                               class="site-demo-active" data-type="tabAdd">单选题4</a></dd>
                        <dd><a href="javascript:;" data-id="5" data-title="单选题5" data-url="index.php?&a=adminList"
                               class="site-demo-active" data-type="tabAdd">单选题5</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">填空题</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" data-id="6" data-title="填空题1" data-url="index.php?&a=adminList"
                               class="site-demo-active" data-type="tabAdd">填空题1</a></dd>
                        <dd><a href="javascript:;" data-id="7" data-title="填空题2" data-url="index.php?&a=adminList"
                               class="site-demo-active" data-type="tabAdd">填空题2</a></dd>
                        <dd><a href="javascript:;" data-id="8" data-title="填空题3" data-url="index.php?&a=adminList"
                               class="site-demo-active" data-type="tabAdd">填空题3</a></dd>
                        <dd><a href="javascript:;" data-id="9" data-title="填空题4" data-url="index.php?&a=adminList"
                               class="site-demo-active" data-type="tabAdd">填空题4</a></dd>
                        <dd><a href="javascript:;" data-id="10" data-title="填空题5" data-url="index.php?&a=adminList"
                               class="site-demo-active" data-type="tabAdd">填空题5</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">判断题</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" data-id="11" data-title="判断题1" data-url="index.php?&a=adminList"
                               class="site-demo-active" data-type="tabAdd">判断题1</a></dd>
                        <dd><a href="javascript:;" data-id="12" data-title="判断题2" data-url="index.php?&a=adminList"
                               class="site-demo-active" data-type="tabAdd">判断题2</a></dd>
                        <dd><a href="javascript:;" data-id="13" data-title="判断题3" data-url="index.php?&a=adminList"
                               class="site-demo-active" data-type="tabAdd">判断题3</a></dd>
                        <dd><a href="javascript:;" data-id="14" data-title="判断题4" data-url="index.php?&a=adminList"
                               class="site-demo-active" data-type="tabAdd">判断题4</a></dd>
                        <dd><a href="javascript:;" data-id="15" data-title="判断题5" data-url="index.php?&a=adminList"
                               class="site-demo-active" data-type="tabAdd">判断题5</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">解答题</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" data-id="16" data-title="解答题1" data-url="index.php?&a=adminList"
                               class="site-demo-active" data-type="tabAdd">解答题1</a></dd>
                        <dd><a href="javascript:;" data-id="17" data-title="解答题2" data-url="index.php?&a=adminList"
                               class="site-demo-active" data-type="tabAdd">解答题2</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <!--tab标签-->
    <div class="layui-tab" lay-filter="demo" style="margin-left: 200px;">
        <ul class="layui-tab-title"></ul>
        <div class="layui-tab-content"></div>
    </div>

    <div class="layui-footer" style="text-align: center">
        <!-- 底部固定区域 -->
        ©版权 西北农林科技大学
    </div>
</div>
<script>
    layui
        // .config({base:'/js/'}).extend({echarts:'echarts'})
        .use(['element', 'layer', 'util'], function () {
            var element = layui.element
                , layer = layui.layer
                , util = layui.util
                , $ = layui.jquery;
            //头部事件

            var tmp = document.cookie;
            var bianhao = tmp.substr(tmp.indexOf('bianhao') + 8, 3);
            var tmp1 = document.cookie;
            var userID = tmp1.substr(tmp1.indexOf('userID') + 7, 4);
            console.log(bianhao);
            console.log(userID);

            var xuanzeti;
            $.post("/student/selectchoice",
                {
                    questionId: bianhao,
                },
                function (data) {
                    console.log(data);
                    xuanzeti = data;
                });
            var panduanti;
            $.post("/student/selecttorf",
                {
                    questionId: bianhao,
                },
                function (data) {
                    console.log(data);
                    panduanti = data;
                });
            var tiankongti;
            $.post("/student/selectfillbacks",
                {
                    questionId: bianhao,
                },
                function (data) {
                    console.log(data);
                    tiankongti = data;
                });
            var jiedati;
            $.post("/student/selectsubjective",
                {
                    questionId: bianhao,
                },
                function (data) {
                    console.log(data);
                    jiedati = data;
                });

            var daan;
            $.post("/student/grade",
                {
                    stuid: userID,
                },
                function (data) {
                    console.log(data);
                    daan = data;
                });


            util.event('lay-header-event', {
                //左侧菜单事件
                menuLeft: function (othis) {
                    layer.msg('展开左侧菜单的操作', {icon: 0});
                }
            });

            $('.site-demo-active').on('click', function () {
                var dataid = $(this);
                //这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目，即已经打开的tab项数目
                if ($(".layui-tab-title li[lay-id]").length <= 0) {
                    //如果比零小，则直接打开新的tab项
                    active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
                } else {
                    //否则判断该tab项是否以及存在
                    var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有
                    $.each($(".layui-tab-title li[lay-id]"), function () {
                        //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
                        if ($(this).attr("lay-id") == dataid.attr("data-id")) {
                            isData = true;
                        }
                    })
                    if (isData == false) {
                        //标志为false 新增一个tab项
                        active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
                    }
                }
                //最后不管是否新增tab，最后都转到要打开的选项页面上
                active.tabChange(dataid.attr("data-id"));
            });

            var curtabid = 0;

            var active = {
                //在这里给active绑定几项事件，后面可通过active调用这些事件
                tabAdd: function (url, id, name) {
                    var qu = '';
                    if (id == 0) {
                        qu = '<div style="font-size: 20px;" >\n' +
                            '    <div id="graarea" style="width: 600px;height:400px; float: left"></div>\n' +
                            '    <div id="recgra" style="width: 600px;height:400px;float: left"></div>\n' +
                            '</div>';

                    } else if (id >= 1 && id <= 5) {
                        qu += '<div class="test_main">\n' +
                            '    <div class="nr_left">\n' +
                            '      <div class="test_left">\n' +
                            '          <div class="test_title">\n' +
                            '            <span>\n' +
                            '              <button class="submit_button" onclick="submit()">返回\n' +
                            '              </button>\n' +
                            '            </span>\n' +
                            '          </div>\n' +
                            '\n' +
                            '          <div class="test_content">\n' +
                            '            <div class="test_content_title">\n' +
                            '              <h2>单选题</h2>\n' +
                            '            </div>\n' +
                            '          </div>\n' +
                            '          <div class="test_content_nr">\n' +
                            '            <ul>\n' +
                            '                <li style="font-size: 20px" id="tigan_danxuanti_' + id + '">' + xuanzeti[id - 1].chquestion + '\n' +
                            '                  <div class="test_content_nr_tt">\n' +
                            '                    <i></i>\n' +
                            '                  </div>\n' +
                            '\n' +
                            '                  <div class="test_content_nr_main" id="xuanxiang_quyu_' + id + '">\n' +
                            '                    <ul>\n' +
                            '                      <li class="option">\n' +
                            '                        <input type="radio" class="radioOrCheck" name="danxuan_anniu_' + id + '" value="A" disabled/>\n' +
                            '                        <label>\n' +
                            '                          ' + xuanzeti[id - 1].chquestiona + '<p class="ue" style="display: inline;" text=""></p>\n' +
                            '                        </label>\n' +
                            '                      </li>\n' +
                            '\n' +
                            '                      <li class="option">\n' +
                            '                        <input type="radio" class="radioOrCheck" name="danxuan_anniu_' + id + '" value="B" disabled/>\n' +
                            '                        <label>\n' +
                            '                          ' + xuanzeti[id - 1].chquestionb + '<p class="ue" style="display: inline;" text=""></p>\n' +
                            '                        </label>\n' +
                            '                      </li>\n' +
                            '\n' +
                            '                      <li class="option">\n' +
                            '                        <input type="radio" class="radioOrCheck" name="danxuan_anniu_' + id + '"value="C" disabled/>\n' +
                            '                        <label>\n' +
                            '                          ' + xuanzeti[id - 1].chquestionc + '\n' +
                            '                          <p class="ue" style="display: inline;" text=""></p>\n' +
                            '                        </label>\n' +
                            '                      </li>\n' +
                            '\n' +
                            '                      <li class="option">\n' +
                            '                        <input type="radio" class="radioOrCheck" name="danxuan_anniu_' + id + '" value="D" disabled/>\n' +
                            '                        <label >\n' +
                            '                          ' + xuanzeti[id - 1].chquestiond + '\n' +
                            '                          <p class="ue" style="display: inline;" text=""></p>\n' +
                            '                        </label>\n' +
                            '                      </li>\n' +
                            '\n' +
                            '                    </ul>\n' +
                            '                  </div>\n' +
                            '                </li>\n' +
                            '\n' +
                            '            </ul>\n' +
                            '          </div>\n' +
                            '      </div>\n' +
                            '<div style="height: 20px"></div>\n' +
                            '            <ul>\n' +
                            '                <div style="height: 20px"></div>\n' +
                            '                <li>\n' +
                            '                    <div>\n' +
                            '                        <label style="font-size: 20px">正确答案：' + xuanzeti[id - 1].chanswer + '</label>\n' +
                            '                    </div>\n' +
                            '                </li>\n' +
                            '                <div style="height: 20px"></div>\n' +
                            '                <li>\n' +
                            '                    <div>\n' +
                            // '                        <label style="font-size: 20px">答案解析：'+xuanzeti[id-1].check+'</label>\n' +
                            '                    </div>\n' +
                            '                </li>\n' +
                            '            </ul>' +
                            '    </div>\n' +
                            '</div>';
                    } else if (id >= 6 && id <= 10) {
                        qu += '<div class="test_main">\n' +
                            '    <div class="nr_left">\n' +
                            '      <div class="test_left">\n' +
                            '          <div class="test_title">\n' +
                            '            <span>\n' +
                            '              <button class="submit_button" onclick="submit()">返回\n' +
                            '              </button>\n' +
                            '            </span>\n' +
                            '          </div>\n' +
                            '\n' +
                            '          <div class="test_content">\n' +
                            '            <div class="test_content_title">\n' +
                            '              <h2>填空题</h2>\n' +
                            '            </div>\n' +
                            '          </div>\n' +
                            '          <div class="test_content_nr">\n' +
                            '            <ul>\n' +
                            '                <li style="font-size: 20px" id="tigan_tiankongti_' + id + '">' + tiankongti[id - 1 - 5].question + '\n' +
                            '                  <div class="test_content_nr_tt">\n' +
                            '                    <i></i>\n' +
                            '                  </div>\n' +
                            '\n' +
                            '                  <div class="test_content_nr_main">\n' +
                            '                    <ul>\n' +
                            '                      <li class="option">\n' +
                            '                        <input style="width: 100px" type="text" name="duoxuan_anniu_' + id + '_1" value=""disabled/>\n' +
                            '                      </li>\n' +
                            '\n' +
                            '                    </ul>\n' +
                            '                  </div>\n' +
                            '                </li>\n' +
                            '            </ul>\n' +
                            '          </div>\n' +
                            '      </div>\n' +
                            '<div style="height: 20px"></div>\n' +
                            '            <ul>\n' +
                            '                <div style="height: 20px"></div>\n' +
                            '                <li>\n' +
                            '                    <div>\n' +
                            '                        <label style="font-size: 20px">正确答案：' + tiankongti[id - 1 - 5].answer + '</label>\n' +
                            '                    </div>\n' +
                            '                </li>\n' +
                            '                <div style="height: 20px"></div>\n' +
                            '                <li>\n' +
                            '                    <div>\n' +
                            // '                        <label style="font-size: 20px">答案解析：'+tiankongti[id-1-5].check+'</label>\n' +
                            '                    </div>\n' +
                            '                </li>\n' +
                            '            </ul>' +
                            '    </div>\n' +
                            '</div>';
                    } else if (id >= 11 && id <= 15) {
                        qu += '<div class="test_main">\n' +
                            '    <div class="nr_left">\n' +
                            '      <div class="test_left">\n' +
                            '          <div class="test_title">\n' +
                            '            <span>\n' +
                            '              <button class="submit_button" onclick="submit()">返回\n' +
                            '              </button>\n' +
                            '            </span>\n' +
                            '          </div>\n' +
                            '\n' +
                            '          <div class="test_content">\n' +
                            '            <div class="test_content_title">\n' +
                            '              <h2>判断题</h2>\n' +
                            '            </div>\n' +
                            '          </div>\n' +
                            '          <div class="test_content_nr">\n' +
                            '            <ul>\n' +
                            '                <li style="font-size: 20px" id="tifan_panduanti_' + id + '">' + panduanti[id - 1 - 10].question + '\n' +
                            '                  <div class="test_content_nr_tt">\n' +
                            '                    <i></i>\n' +
                            '                  </div>\n' +
                            '\n' +
                            '                  <div class="test_content_nr_main" id="sd">\n' +
                            '                    <ul>\n' +
                            '                      <li class="option">\n' +
                            '                        <input type="radio" class="radioOrCheck" name="panduan_anniu_' + id + '" value="right" disabled/>\n' +
                            '                        <label>\n' +
                            '                          正确.<p class="ue" style="display: inline;" text="${question.sa}"></p>\n' +
                            '                        </label>\n' +
                            '                      </li>\n' +
                            '\n' +
                            '                      <li class="option">\n' +
                            '                        <input type="radio" class="radioOrCheck" name="panduan_anniu_' + id + '" value="wrong" disabled/>\n' +
                            '                        <label>\n' +
                            '                          错误.<p class="ue" style="display: inline;" text="${question.sb}"></p>\n' +
                            '                        </label>\n' +
                            '                      </li>\n' +
                            '                    </ul>\n' +
                            '                  </div>\n' +
                            '                </li>\n' +
                            '\n' +
                            '            </ul>\n' +
                            '          </div>\n' +
                            '      </div>\n' +
                            '<div style="height: 20px"></div>\n' +
                            '            <ul>\n' +
                            '                <div style="height: 20px"></div>\n' +
                            '                <li>\n' +
                            '                    <div>\n' +
                            '                        <label style="font-size: 20px">正确答案：' + panduanti[id - 1 - 10].answer + '</label>\n' +
                            '                    </div>\n' +
                            '                </li>\n' +
                            '                <div style="height: 20px"></div>\n' +
                            '                <li>\n' +
                            '                    <div>\n' +
                            // '                        <label style="font-size: 20px">答案解析：' + panduanti[id - 1 - 10].check + '</label>\n' +
                            '                    </div>\n' +
                            '                </li>\n' +
                            '            </ul>' +
                            '    </div>\n' +
                            '</div>';

                    } else if (id >= 16 && id <= 17) {
                        qu += '<div class="test_main">\n' +
                            '    <div class="nr_left">\n' +
                            '      <div class="test_left">\n' +
                            '          <div class="test_title">\n' +
                            '            <span>\n' +
                            '              <button class="submit_button" onclick="submit()">返回\n' +
                            '              </button>\n' +
                            '            </span>\n' +
                            '          </div>\n' +
                            '\n' +
                            '          <div class="test_content">\n' +
                            '            <div class="test_content_title">\n' +
                            '              <h2>解答题</h2>\n' +
                            '            </div>\n' +
                            '          </div>\n' +
                            '          <div class="test_content_nr">\n' +
                            '            <ul>\n' +
                            '                <li style="font-size: 20px" id="tigan_jiedati_' + id + '">' + jiedati[id - 1 - 15].subquestion + '\n' +
                            '                  <div class="test_content_nr_tt">\n' +
                            '                    <i></i>\n' +
                            '                  </div>\n' +
                            '\n' +
                            '                  <div class="test_content_nr_main" id="sd">\n' +
                            '                    <textarea cols="100" rows="10" wrap = "hard" name = "jieda_' + id + '"disabled></textarea>\n' +
                            '                  </div>\n' +
                            '                </li>\n' +
                            '\n' +
                            '            </ul>\n' +
                            '          </div>\n' +
                            '      </div>\n' +
                            '<div style="height: 20px"></div>\n' +
                            '            <ul>\n' +
                            '                <div style="height: 20px"></div>\n' +
                            '                <li>\n' +
                            '                    <div>\n' +
                            '                        <label style="font-size: 20px">正确答案：' + jiedati[id - 1 - 15].subanswer + '</label>\n' +
                            '                    </div>\n' +
                            '                </li>\n' +
                            '                <div style="height: 20px"></div>\n' +
                            '                <li>\n' +
                            '                    <div>\n' +
                            // '                        <label style="font-size: 20px">答案解析：' + jiedati[id - 1 - 15].check + '</label>\n' +
                            '                    </div>\n' +
                            '                </li>\n' +
                            '            </ul>' +
                            '    </div>\n' +
                            '</div>';
                    }
                    //新增一个Tab项 传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值
                    element.tabAdd('demo', {
                        title: name,
                        content: qu,
                        id: id //规定好的id
                    });
                    showgra();
                    FrameWH();  //计算ifram层的大小
                },
                tabChange: function (id) {
                    curtabid = id;
                    //切换到指定Tab项
                    element.tabChange('demo', id); //根据传入的id传入到指定的tab项
                },
                tabDelete: function (id) {
                    element.tabDelete("demo", id);//删除
                }
            };

            function FrameWH() {
                var h = $(window).height();
                $("iframe").css("height", h + "px");
            }

        });

    function showgra() {
        var myChart1 = echarts.init(document.getElementById('graarea'));

        // 指定图表的配置项和数据
        option1 = {
            title: {
                text: '                          此次考试中各类题型的正确数量如下：',
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: '正确数量',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '40',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {value: 3, name: '选择题'},
                        {value: 2, name: '填空题'},
                        {value: 3, name: '判断题'},
                        {value: 1, name: '解答题'},
                    ]
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart1.setOption(option1);

        var chartDom2 = document.getElementById('recgra');
        var myChart2 = echarts.init(chartDom2);
        var option2;

        option2 = {
            title: {
                text: '                                    近期考试科目及分数如下：',
            },
            xAxis: {
                type: 'category',
                data: ['web', 'java', '生活常识', '数学']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [80, 86, 83, 88],
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(0, 0, 128, 0.5)'
                }
            }]
        };
        myChart2.setOption(option2);
    }

    function submit() {
        window.location.href = "select_page.html";
    }

</script>
</body>
</html>